<template>
  <div>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="formData.username" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="formData.mobile" />
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <!-- value-format 设置 js 中的日期格式; format 设置页面显示的日期格式 -->
        <el-date-picker
          v-model="formData.timeOfEntry"
          type="date"
          placeholder="选择日期"
          style="width: 100%;"
          format="yyyy年MM月dd日"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <!-- 页面上用户看到的数据, 就是 label 中的显示, 后端获取到的数据, 就是 value 中的数据,
      在 js 里面, v-model 绑定的值的内容就是 value 内容, 这个也是我们后界面发送请求的时候,
      后端需要的
        这里面显示的正式与非正式, 是我么在常来那个的枚举值里面统一写好的, 和后端约定的一些内容,
        不能在 模板 template 中把这些部门内容写成死数据, 不利于后期维护-->
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="formData.formOfEmployment" placeholder="请选择活动区域" style="width: 100%;">
          <el-option v-for="item in constantEnum.hireType" :key="item.id" :label="item.value" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input v-model="formData.workNumber" />
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <el-input v-model="formData.departmentName" readonly @focus="isShowTree = true" />
        <!-- 部门列表树形结构 -->
        <el-tree v-if="isShowTree" :data="departData" :props="defaultProps" @node-click="handleNodeClick" />
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker
          v-model="formData.correctionTime"
          type="date"
          placeholder="选择日期"
          style="width: 100%;"
          format="yyyy年MM月dd日"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="$emit('close')">取消</el-button>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// Enum 枚举
import constantEnum from '@/constant/employees'
import { valideMobile } from '@/utils/validate'
import { getDepartmentInfoRequest } from '@/api/department'
import { transformListToTree2 } from '@/utils'
import { addUserListRequest } from '@/api/employees'
export default {
  data() {
    const validateMobile = (rules, valid, callback) => {
      if (!valideMobile(valid)) {
        callback(new Error('请输入正确格式的手机号'))
      } else {
        callback()
      }
    }
    return {
      // 表单数据初始化
      formData: {
        username: '', // 姓名
        mobile: '', // 手机号
        timeOfEntry: '', // 入职时间
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '', // 部门-组织名称
        correctionTime: '' // 转正时间
      },
      // 部门列表数据
      departData: [],
      // 数据 departData 准备好以后吗页面上没有内容, 有结构, 是因为我们给的默认 label 树形结构是 label
      // 而后端返回的对象里面 没有 label 树形结构,只有 name 属性 是我们需要的, 所以将 左边的 label
      // 修改为 name 字段, children 是我们的 transform 里面定义的, 不用修改
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 导入的变量如果要直接使用到 template 模板中, 是没有响应式的
      // 要想变量的值能够响应式的发生过变化, 就需要在 data 中定义一下
      constantEnum: constantEnum,
      // 是否展示树状结构
      isShowTree: false,
      // 定义校验规则
      rules: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 4, message: '员工姓名为 2 ~ 4 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validateMobile, trigger: 'change' }
        ],
        timeOfEntry: [
          { required: true, message: '请输入入职时间', trigger: 'change' }
        ],
        formOfEmployment: [
          { required: true, message: '请输入聘用形式', trigger: 'blur' }
        ],
        workNumber: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '请输入部门-组织名称', trigger: 'change' }
        ],
        correctionTime: [
          { required: true, message: '请输入转正时间', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    // 页面加载调用 - 获取部门列表
    this.getDepartmentInfo()
  },
  methods: {
    // ^ ==================== 定义函数发送请求 ====================
    // 请求 - 获取部门列表
    async getDepartmentInfo() {
      try {
        const res = await getDepartmentInfoRequest()
        if (res.success) {
          // 删除掉数组的第一项，因为他是公司的信息
          res.data.depts.shift()
          // 平铺数据转为树形结构
          this.departData = transformListToTree2(res.data.depts, '')
        } else {
          console.log('获取部门列表失败')
        }
      } catch (error) {
        console.log('获取部门列表失败', error)
      }
    },
    // 请求 - 新增员工
    async addUserList() {
      try {
        const res = await addUserListRequest(this.formData)
        if (res.message) { // 业务代码成功时做些什么
          this.$message.success('添加员工成功!')
          this.$emit('success') // 通知父组件执行 success 函数
        } else {
          this.$message.error('添加员工失败')
        }
      } catch (error) {
        console.log('新增员工失败', error)
      }
    },
    // ^ ==================== 定义事件处理函数 ====================
    // 事件 - 提交按钮点击事件
    onSubmit() { // 兜底校验
      console.log(this.formData)
      this.$refs.formRef.validate(val => {
        if (!val) return this.$message.error('校验失败, 请重新输入后再提交')
        this.addUserList() // 校验成功发送请求
      })
    },
    // 事件 - 部门树形结构点击事件
    handleNodeClick(value) {
      // 当我们点击树形结构时, 对应点击事件中的的一个参数可以获取到当点击的当前项的对应数据
      // 将对应数据中的对应值, 赋给表单输入框的 value 所双向绑定的 数据的值
      // 工作中, 如果只有 if else 两个条件, 那么一般不会出现 else
      // 一般工作中使用 return 中断函数的执行 -- 我们之前项目中, 会合理地使用 if else 优化
      // * 进行判断: 如果点击的对应当前项的 children 有值, 代表
      if (value.children?.length > 0) return
      this.formData.departmentName = value.name
      this.isShowTree = false // 设置完毕, 关闭部门树形结构
    },
    // 事件 - 清空表单校验, 数据初始化
    // $refs 可以访问子组件里面所有的属性和方法
    resetClean() {
      this.$refs.formRef.resetFields() // 清空表单校验
      this.formData = this.$options.data.call(this).formData // 重置表单数据
    }
  }
}
</script>

<style>
</style>
